<template>
  <div>
    <div class="popup_box">
      <!-- 搜索 -->
      <van-search
        v-model="searchValue"
        show-action
        :placeholder="placeholder"
        @search="searchTag(searchValue)"
        @cancel="onCancel"
        @clear="showBox = 1"
        @input="getHotSearch"
      />
      <!-- 历史搜索记录组件 -->
      <historyBox
        v-if="showBox === 1"
        :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList"
        @searchTag="searchTag"
        @clearHistorys="clearHistorys"
      ></historyBox>
      <commodity-list
        v-if="showBox === 2"
        :list="goodslist"
        :categoryOptions="categoryOptions"
        :categoryId="searchObj.categoryId"
        @changePrice="changePrice"
        @changeCategory="changeCategory"
      ></commodity-list>
      <hot-search-list
        @listSearch="listSearch"
        v-if="showBox === 3"
        :list="hotList"
      />
    </div>
  </div>
</template>

<script>
import historyBox from './history_box.vue'
import {
  getGoodsList,
  getSearchLists,
  clearHistory,
  getHotList
} from '@/api/home'
import HotSearchList from './hotSearchList.vue'
export default {
  name: 'homepupop',
  components: { historyBox, HotSearchList },
  data () {
    return {
      showBox: 1,
      searchValue: '',
      placeholder: '请输入搜索关键词',
      goodslist: [],
      searchObj: {
        keyword: '',
        page: 1,
        size: 20,
        order: 'desc', // desc高到底 asc低到高
        categoryId: 0, // 类别id，
        sort: 'id' // id 或者price
      },
      historyKeywordList: [], // 历史搜索
      hotKeywordList: [], // 热点
      categoryOptions: [],
      hotList: []
    }
  },
  created () {
    this.getSearchList()
  },
  methods: {
    onCancel () {
      this.$router.back()
    },
    // 点击历史记录搜索
    async searchTag (key) {
      this.showBox = 2
      this.searchValue = key
      this.searchObj.keyword = key
      const res = await getGoodsList(this.searchObj)
      this.goodslist = res.data.goodsList
      const options = res.data.filterCategory.map((item) => {
        return {
          text: item.name,
          value: item.id
        }
      })
      this.categoryOptions = options
    },
    // 改变了价格搜索
    changePrice (val) {
      this.searchObj.order = val
      this.searchObj.sort = 'price'
      this.search()
    },
    // 改变了分类搜索
    changeCategory (val) {
      this.searchObj.categoryId = val
      this.search()
    },
    async search () {
      const res = await getGoodsList(this.searchObj)
      this.goodslist = res.data.goodsList
    },
    // 获取搜索列表
    async getSearchList () {
      const res = await getSearchLists()
      this.placeholder = res.data.defaultKeyword.keyword
      this.historyKeywordList = res.data.historyKeywordList
      this.hotKeywordList = res.data.hotKeywordList
    },
    // 清空历史记录
    async clearHistorys () {
      const res = await clearHistory()
      if (res.errno === 0) {
        this.getSearchList()
      }
    },
    // 获取热门搜索
    async getHotSearch () {
      this.showBox = 3
      const res = await getHotList({ keyword: this.searchValue })
      this.hotList = res.data
    },
    listSearch (val) {
      this.searchTag(val)
    }
  }
}
</script>

<style lang='less' scoped>
.popup_box {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
